<template>
	<view class="content">
		<view class="container">
			<img class="bg-img" style="background-size: contain;"
				src="https://scoringchina.oss-cn-beijing.aliyuncs.com/RolexGolf/home.jpg"></img>
			<view class="button-grid">
				<view v-for="(item, index) in 6" :key="index" class="transparent-btn" @click="onButtonClick(index)"></view>
			</view>
			<view class="login-btn" @click="onLogin"></view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
		}
	},
	onLoad() {

	},
	methods: {
		onLogin() {
			uni.redirectTo({
				url: '/pages/my/index'
			});
		},
		onButtonClick(index) {
			console.log(`Button ${index + 1} clicked`);
			// 这里添加按钮点击后的逻辑
			if (index + 1 == 3) {
				uni.navigateTo({  //成绩直播
					url: '/pages/cjzb/index'
				});
			}
			if (index + 1 == 4) {
				uni.navigateTo({  //主题活动
					url: '/pages/zthd/index'
				});
			}
			if (index + 1 == 5) {
				uni.showToast({
					title: '暂无照片直播',
					icon: 'none',
					duration: 2000
				});
			}
			if (index + 1 == 6) {
				uni.navigateTo({  //赛事公告
					url: '/pages/ssgg/index'
				});
			}
		}
	}
}
</script>

<style>
.content {
	width: 100vw;
	height: 100vh;

}

.container {
	position: relative;
}

.bg-img {
	.button-grid {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 10px;
		padding: 20px;
		box-sizing: border-box;
		z-index: 2;
	}

	.transparent-btn {
		width: 90px;
		height: 90px;
		background: transparent;
		border: none;
	}

	width: 100vw;

	object-fit: contain;
	z-index: 1;
	background-size: contain;

	overflow: hidden;
}




.login-btn {
	width: 100vw;
	padding: 24rpx 0;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	border-radius: 40rpx;
	text-align: center;
	font-size: 32rpx;
	z-index: 3;
	position: absolute;
	left: 0;
	bottom: 0px;
	height: 120px;

}

.button-grid {
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	height: 65%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 20px;
	box-sizing: border-box;
	z-index: 2;
}

.transparent-btn {

	background: transparent;
	border: none;
}
</style>